<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 什么是 !important */
        /* CSS 中的 !important 规则用于增加样式的权重。 */
        /* !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 */

        #myid {
            background-color: blue;
        }

        .myclass {
            background-color: gray;
        }

        p {
            background-color: red !important;
        }

        /* 以上实例中，尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，
        因为 !important 规则会覆盖 background-color 属性。 */
    </style>
</head>

<body>

    <p>段落中的一些文本内容！！！都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p>

    <p class="myclass">段落中的一些文本内容！！！都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p>

    <p id="myid">段落中的一些文本内容！！！都会显示红色，因为 !important 作用，你可以删除该规则来看看效果。</p>

</body>

</html>